<!--/*-->
<!-- * @Author: ROYIANS-->
<!-- * @Date: 2022/10/18 9:12-->
<!-- * @Description: 文本-->
<!-- * @sign: 迷路，并无小路大路短路长路之区别。不能说在大路长路上迷路就不是迷路了。走在达不到目的的路上，就是迷路。-->
<!-- * ╦═╗╔═╗╦ ╦╦╔═╗╔╗╔╔═╗-->
<!-- * ╠╦╝║ ║╚╦╝║╠═╣║║║╚═╗-->
<!-- * ╩╚═╚═╝ ╩ ╩╩ ╩╝╚╝╚═╝-->
<!-- */-->
<template>
  <div style="width: 100%; height: 100%" @dblclick="onDblClick">
    <RoyModal
      v-if="showEditor"
      v-model:show="showEditor"
      height="70%"
      title="长文本编辑"
      width="60%"
      @close="handleTextClosed"
    >
      <div class="roy-wang-editor" @mousedown="handleMouseDown">
        <WangToolbar
          :defaultConfig="toolbarConfig"
          :editor="wangEditor"
          style="border-bottom: 1px solid #ccc"
        />
        <WangEditor
          v-model:value="html"
          :defaultConfig="editorconfig"
          :mode="mode"
          style="height: 300px"
          @onCreated="onCreated"
        />
      </div>
    </RoyModal>
    <StyledText v-bind="style">
      <div class="roy-text-inner" v-html="propValue"></div>
    </StyledText>
  </div>
</template>

<script setup>
import { StyledText } from '@/components/PageComponents/style'
import RoyModal from '@/components/RoyModal/RoyModal'
import WangToolbar from '@/components/PageComponents/WangEditorVue/WangToolbar'
import WangEditor from '@/components/PageComponents/WangEditorVue/WangEditor'
import { toolBarConfig, editorConfig, mode } from '@/components/config/editorConfig'
import commonMixin from '@/mixin/commonMixin'
import { mapState } from 'vuex'
import { useStore } from 'vuex'
import { defineProps, defineEmits, defineExpose, ref, onBeforeUnmount,computed } from 'vue'
import { deepCopy } from '@/utils/html-util'

const store = useStore()
/**
 * 文本
 */
//转vue3

const toolbarConfig = ref(toolBarConfig)
const editorconfig=ref(editorConfig)
const props = defineProps({
  element: {
    type: Object,
    default: () => {}
  },
  propValue: {
    type: String,
    default: ''
  }
})
const wangEditor = ref(null)
const showEditor = ref(false)
const html =ref(props.propValue);
const curComponent = computed(() => store.state.printTemplateModule.curComponent);
const style = computed(() => props.element.style || {});
const onCreated = (editor) => {
  wangEditor.value = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
}
const onBlur = () => {
  store.commit('printTemplateModule/setPropValue', {
    id: props.element.id,
    propValue: html.value
  })
}
const onDblClick = () => {
  showEditor.value = true
}

const handleMouseDown = (e) => {
  e.stopPropagation()
}

const handleTextClosed = () => {
  onBlur()
}
onBeforeUnmount(() => {
  const editor = wangEditor
  if (editor == null) {
    return
  }
  editor.value=null // 组件销毁时，及时销毁编辑器
})
</script>
